<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>${model.listing.title}</title>

        <link rel="stylesheet" href="css/dbpedia/style.css" type="text/css" />
        <link rel="stylesheet" href="css/dbpedia/highlighter.css" type="text/css" />        
        <link rel="stylesheet" href="css/gmaps/default.css" type="text/css" />
        <link rel="stylesheet" href="css/token/token-input.css" type="text/css" />
        <link rel="stylesheet" href="css/token/token-input-facebook-2.css" type="text/css" />

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
        <script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/token/jquery.tokeninput.js"></script>   
        <script type="text/javascript" src="js/page/geocoder.js"></script>  

        <%@ include file="include/listingMaps.jsp" %>
    </head>

    <body>

        <%@include file="header.jsp" %>

        <br><br>

        <table>
            <tr>
                <td>
                    <h1>
                        &nbsp;${model.listing.title}
                        <c:if test="${model.owner}">
                            (<a href="listing.htm?a=4&id=${model.listing.id}">edit</a>|<a href="listing.htm?a=5&id=${model.listing.id}">delete</a>)                            
                        </c:if>
                    </h1>   
                    
                </td>
                <td>
                    
                </td>
            </tr>
        </table>
        
        <table cellpadding="5" cellspacing="5">
            <tr>
                <td style="vertical-align: top; width:600px;">
                    <table cellpadding="5" cellspacing="5">
                        <tr><td>Property Type:</td><td>${model.listing.propertyType.title}</td></tr>   
                        <tr><td>Status:</td><td>${model.listing.statusType.title}</td></tr>   
                        <tr>
                            <td>Address:</td>
                            <td>
                                ${model.listing.street} &nbsp;
                                ${model.listing.structure}&nbsp;
                                ${model.listing.city} &nbsp;
                                ${model.listing.zip}
                            </td>
                        </tr>                      
                        <tr><td>Unit Number:</td><td>${model.listing.number}</td></tr>                   
                        <tr><td>Floor:</td><td>${model.listing.floor}</td></tr>
                        <tr>
                            <td>Sq. Area</td>
                            <td>${model.listing.sqArea}</td>
                        </tr>
                        <tr>
                            <td>Bedrooms:</td>
                            <td>${model.listing.numBedrooms}</td>
                        </tr>
                        <tr>
                            <td>Bathrooms:</td>
                            <td>${model.listing.numBathrooms}</td>
                        </tr>                        
                        <tr>
                            <td>Amenities:</td>
                            <td>
                                <c:forEach items="${model.listing.amenities}" var="amenity">
                                    <a href="retype.htm?a=12&id=${amenity.id}">${amenity.title}</a>, &nbsp;
                                </c:forEach>
                            </td>
                        </tr>
                        
                        <tr>
                            <td colspan="2"><br></td>
                        </tr>
                        
                        <tr>
                            <td>Month Rate:</td>
                            <td>&#8369; ${model.listing.monthRate}/Mo.</td>
                        </tr>
                        <tr>
                            <td>Selling Price:</td>
                            <td>&#8369; ${model.listing.sellingPrice}</td>
                        </tr>
                        <tr>
                            <td>Availability Date:</td>
                            <td><fmt:formatDate value="${model.listing.availabilityDate}" pattern="MM/dd/yyyy" /></td>
                        </tr>
                                    
                        <tr>
                            <td colspan="2"><br></td>
                        </tr>        
                        <tr><td>Description:</td><td>${model.listing.description}</td></tr>
                        
                    </table>
                </td>  
                <td style="vertical-align: top;">
                    <div id="map_canvas" style="width:600px; height:200px; position:relative; left:0%"></div>  
                    <br><br>
                    
                    <table border="0" cellspacing="2" cellpadding="2" style="width: 600px">
                        <tr>
                            <td style="background-color: #369">
                                <br>
                                &nbsp;&nbsp;
                                <b>Contact ${model.listing.posterType.title}</b>
                                <br>
                                <br>
                            </td>                            
                        </tr>
                        <tr>
                            <td>
                                <br>
                                ${model.listing.creator.firstName} ${model.listing.creator.lastName}
                                <hr>
                            </td>                            
                        </tr>
                        <tr>
                            <td>
                                ${model.listing.creator.emailPrimary}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                ${model.listing.creator.mobilePrimary}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                ${model.listing.creator.landlinePrimary}
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

        
        <br>
        <hr>
        <br>

        <table cellpadding="5" cellspacing="5">
            <tr>
                <td>
                    <c:forEach items="${model.listing.photos}" var="photo">
                        <div style="float:left; padding: 5px;">
                            <img src="../uploads/img/${photo.filename}" alt="${photo.filename}" style="height:200px; max-width:300px"></img>                            
                        </div>
                    </c:forEach>
                </td>
            </tr>
        </table>
        
        <br><br>

    </body>
</html>
